<template>
	<view class="myposts-title">
		<view class="title-row" 
		v-for="item in showData" 
		:key="item.name" 
		:style="{width:cssData.width}"
		:class="{active:newIndex == item.id}" @click="switchNav(item.id)">
			{{item.name}}
		</view>
	</view>
</template>

<script>
	export default {
		props:['showData','status','cssData'],
		data(){
			return{
				newIndex:1,
			}
		},
		watch: {
			status: {
				handler(newName, oldName) {
					// console.log('头部-->',newName)
					if(this.status){
						this.newIndex = this.status
					}
				},
				immediate: true,
				deep: true
			},
			cssData: {
				handler(newName, oldName) {
					// console.log(newName)
				},
				immediate: true,
				deep: true
			}
		},
		methods:{
			// 切换
			switchNav(id){
				this.newIndex = id
				this.$emit('change',this.newIndex)
			}
		}
	}
</script>

<style lang="scss">
	.myposts-title{
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 20rpx;
		background: #fff;
		position: sticky;
		top: var(--window-top);
		z-index: 999;
		
		.title-row{
			box-sizing: border-box;
			width: 140rpx;
			height: 76rpx;
			line-height: 76rpx;
			text-align: center;
			font-size: 32rpx;
			&.active{
				font-weight:600;
				color: #FB7A26;
				border-bottom:6rpx solid #FB7A26;
			}
		}
	}
</style>
